<template>
  <div>
    <div
      class="explore-thinking"
      v-show="scrollTop >= 800 || flag"
      @click="drawer = true"
    >
      <div class="explore-wrap">
        <span class="el-icon-s-fold"></span>
        <p>探索思政元素</p>
      </div>
      <div class="explore-left">
        <span class="el-icon-arrow-left"></span>
      </div>
    </div>
    <transition name="el-fade-in-linear">
      <Popout
        v-show="drawer"
        v-if="educationList.length"
        :data="educationList"
        @e-close="drawer = false"
      />
    </transition>
  </div>
</template>
<script>
import { openApiSysIdeologicalEducationQuery } from "@/api/openApi";
export default {
  components: {
    Popout: () => import("./popout.vue"),
  },
  data() {
    return {
      scrollTop: 0,
      flag: false,
      drawer: false,
      direction: "ltr",
      activeNames: [],
      listQuery2: {
        page: 1,
        limit: 10,
        type: 1,
      },
      educationList: [],
    };
  },
  watch: {
    $route(v) {
      this.flag = false;
      if (v.name == "index") {
        window.addEventListener("scroll", this.handleScroll, true);
      } else {
        this.flag = true;
      }
    },
  },
  mounted() {
    this.getEducation();
    if (this.$route.name == "index") {
      window.addEventListener("scroll", this.handleScroll, true);
    } else {
      this.flag = true;
    }
  },
  methods: {
    getEducation() {
      openApiSysIdeologicalEducationQuery(this.listQuery2).then((res) => {
        this.educationList = res.data.data;
      });
    },
    handleScroll() {
      this.scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop;
    },
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll, true);
  },
};
</script>
<style scoped lang="scss">
.explore-thinking {
  position: fixed;
  left: -30px;
  top: 50%;
  margin-top: -60px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  background: $mainColor;
  z-index: 99;
  border: 1px solid rgba(255, 255, 255, 0.5);
  // transition: all 0.3s;
  .explore-wrap {
    position: absolute;
    right: 32px;
    top: 15px;
    width: 1em;
    font-size: 16px;
    line-height: 1;
    display: none;
    p,
    span {
      color: #fff;
    }
  }
  .explore-left {
    position: absolute;
    right: 5px;
    top: 15px;
    // opacity: 0;
    span {
      color: #fff;
      font-size: 26px;
      font-weight: bold;
    }
  }
  &:hover {
    left: -70px;
    top: 50%;
    margin-top: -100px;
    width: 140px;
    height: 140px;
    .explore-left {
      right: 48px;
      top: 55px;
      // opacity: 1;
    }
    .explore-wrap {
      display: block;
    }
  }
}
</style>